

var backBtn = function(){};

$(function(){
	$(document).on("click",".nyi",function(){
		alert("This feature is not yet implemented!");
	});
	$(document).on("click","#menuBtn",function(){
		$("#menu").toggle();
	});
	$(document).on("click",function(e){
		if(e.target.id != "menuBtn"){
			$("#menu").hide();
		}
	});
	$(document).on("click","#backBtn",function(){
		backBtn();
	});
	
	loadHome();
});

var loadHome = function(){
	$("#title").html("Home");
	$("#backBtn").hide();

	$("#content").setTemplateURL("tpl/home.html");
	$("#content").processTemplate(model);
	
	$("#home .room").click(function(){
		var id = $(this).attr("roomId");
		var room;
		for(var i in model.rooms){
			if(model.rooms[i].id == id){
				loadRoom(model.rooms[i]);
				break;
			}
		}
	});
};

var loadRoom = function(room){
	$("#title").html("Home > " + room.name);
	$("#backBtn").show();
	backBtn = function(){
		loadHome();
	};

	$("#content").setTemplateURL("tpl/room.html");
	$("#content").processTemplate(room);
	
	var down = "";
	var perc = "";
	
	$(".pointer, .slider").on("mousedown",function(){
		down = $(this).attr("optionId");
	});
	
	$("#room").on("mousedown mousemove",function(e){
		$(".slider").each(function(){
			if($(this).attr("optionId") == down){
				var pos = e.pageX - $(this).offset().left;
				pos = (pos < 0)? 0 : pos;
				pos = (pos > $(this).width())? $(this).width() : pos;
				
				perc = calcSliderPerc(0, $(this).width(), pos);
				var val = calcSliderVal($(this).attr("min"), $(this).attr("max"), perc);
				
				val = Math.round(val * 10) / 10;
				
				
				$(this).children(".pointer").css("left", pos);
				$(this).parent().children(".numeric").children(".value").html(val);
			}
		});
	});
	
	$("#room").on("mouseup mouseleave", function(){
	
		try{
			if(down != "") $.get(SERVER + "/set?id=" + down + "&value=" + perc, function() {});
		} catch(e){}
		
		down = "";
	});
	
	$(".switch").click(function(){
		var id = $(this).attr("optionId");
		var on = $(this).hasClass("off");
		
		try{
			$.get(SERVER + "/set?id=" + id + "&value=" + ((on)? "1.0" : "0.0"), function() {});
		} catch(e){}
		
		if(on){
			$(this).removeClass("off");
		} else {
			$(this).addClass("off");
		}
		
	});
	
	$.get(SERVER + "/get", function( data ) {
		for(var i in data){
			$(".option").each(function(){
				if($(this).attr("optionId") == i.id){
					var pos = calcSliderVal(0, 200, i.value);
					var val = calcSliderVal($(this).children(".slider").attr("min"), $(this).children(".slider").attr("max"), i.value);
					$(this).children(".slider").children(".pointer").css("left", pos);
					$(this).children(".numeric").children(".value").html(val);
				}
			});
		}
	});
};

var calcSliderPerc = function(min, max, val){
	min -= 0; max -= 0; val -= 0; //integer cast
	return (val - min) / (max - min);
};

var calcSliderVal = function(min, max, perc){
	min -= 0; max -= 0; perc -= 0; //integer cast
	return (perc * (max - min)) + min;
};